<template>
	<view class="u-page">
		<u-subsection :list="title"  :current="current" @change="changeTab"></u-subsection>	
		<view class="list">
			<block v-for="(item,index) in list" :key="index">
				<view class="orderDetail">
					<view class="top">
						<text class="status tag-danger" v-if="!item.receive_time">
							待配送
						</text>
						<text class="status tag-success" v-else>
							已配送
						</text>
						<text class="order_no">{{item.order_no}}</text>
					</view>
					<view class="goodsinfo">
						<view class="m-img" :style="'background:url('+item.goods.img+')no-repeat;background-size:cover;'">
						</view>
						<view class="m-text">
							<view class="m-title">
								{{item.goods.name}}
							</view>
							<view class="m-descripe">
								{{item.goods.des}}
							</view>
							<view class="m-price">
								￥{{item.price}} * {{item.number}}{{item.spec.unit}}
								<text style="margin-left: 10rpx;" class="tag-danger" v-if="item.refuse_number">退{{item.refuse_number}}{{item.spec.unit}}</text>
							</view>
						</view>
					</view>					
					<view class="footer">
						<view v-if="item.receive_time" style="margin-bottom: 10rpx;">配送日期：{{item.receive_time | parseTime}}</view>
						<view class="zhifu"><text>支付方式：{{item.pay_type}}</text><text>合计金额：￥{{item.total_money}}</text></view>
					</view>
				</view>
			</block>
			<view v-if="list.length==0">
				<u-empty text="没有订单!" mode="search" marginTop="50"></u-empty>
			</view>
		</view>
		<view v-if="yuefu" class="payorder">
			<view class="total"><text style="font-weight: bold;font-size: 30rpx;">合计：</text>{{yuefu[current].count}}单，￥{{yuefu[current].total_money || 0}}</view>
			<view class="pay">
				<block v-if="current==0">
					<u-button size="small" type="primary" v-if="yuefu[current].count==0" :disabled="true">
						<text>没有订单</text>
					</u-button>
					<u-button size="small" type="primary" v-else-if="yuefu[current].count>0 && !yuefu[current].bill" :disabled="true">
						<text>未出账单</text>
					</u-button>
					<u-button size="small" type="primary" v-else-if="yuefu[current].bill && yuefu[current].bill.is_pay" :disabled="true">
						<text>已经支付</text>
					</u-button>
					<u-button @click="pay" size="small" type="primary" v-else-if="yuefu[current].bill && !yuefu[current].bill.is_pay">
						<text>立即支付</text>
					</u-button>
				</block>
				<block v-if="current==1">
					<u-button size="small" type="primary" :disabled="true">
						<text>立即支付</text>
					</u-button>
				</block>
			</view>	
		</view>
	</view>
</template> 

<script>
	import {baseUrl,methods} from '@/utils/methods.js';
	export default {
		data() {
			return {
				title: ['上月账单','本月账单'],
				current:0,
				list:[],
				page:1,
				endData:false,
				yuefu:'',
				customer_id:'',
				goods_id:''
			}
		},
		onPullDownRefresh() {
			this.page=1;
			this.endData=false;
			this.list=[];
			this.pagelist(true);
		},
		onReachBottom() {
			this.pagelist();
		},
		filters:{
			parseTime:function(data){
				if(data){
					return data.substr(0,16);
				}
			},
			parsePayType:function(data){
				if(data=='wechat'){
					return '微信支付';
				}
				if(data=='month'){
					return '月付';
				}
				if(data=='delivery'){
					return '货到付款';
				}
			}
		},
		onLoad(e) {
			this.current=e.current || 0;
			let customer=this.$customer();
			this.goods_id=e.goods_id;
			this.customer_id=customer.id;
			this.$get('buy/yuefu?goods_id='+this.goods_id+'&customer_id='+this.customer_id).then(res=>{
				this.yuefu=res;
				this.pagelist();
			});		
		},
		methods: {
			...methods,
			pay:function(){
				uni.showModal({
					content:'您确定要支付月付账单吗?',
					success: (res) => {
						if(res.confirm){
							let id=this.yuefu[0].bill.id;
							// #ifdef H5
							let platform='mp';
							// #endif
							// #ifdef MP-WEIXIN
							let platform='miniapp';
							// #endif
							this.$get('buy/payYuefu',{bill_id:id,platform:platform},true).then(res=>{
								// #ifdef H5
								wxpay(res);
								// #endif
								// #ifdef MP-WEIXIN
								uni.requestPayment({
									provider:'wxpay',
									...res,
									success: () => {
										this.$msg('支付成功');
										this.yuefu[0].bill.is_pay=1;
									},
									fail:()=>{
										this.$msg('支付失败！');
									}
								});
								// #endif
							});
						}
					}
				});
			},
			pagelist:function(pulldown=false){
				if(this.endData){
					this.$msg('已经到底了');
					return;
				}
				this.$get("buy/yuefulist",{
					month:parseInt(this.current)+1,
					customer_id:this.customer_id,
					goods_id:this.goods_id,
					page:this.page
				},true).then(res=>{
					if(pulldown){
						uni.stopPullDownRefresh();
					}
					if(res.length<10){
						this.endData=true;
					}
					this.list=this.list.concat(res);	
					this.page++;	
				});		
			},
			changeTab:function(e){
				this.current=e;
				this.page=1;
				this.endData=false;
				this.list=[];
				this.pagelist();
			}
		}
	}
</script>

<style lang="scss">
	.u-page{
		padding-bottom: 100rpx;
	}
	.list{
		padding: 20rpx;
		font-size: 24rpx;
		.orderDetail{
			min-height: 100rpx;
			margin-bottom: 20rpx;
			border-radius: 6rpx;
			box-shadow: 0rpx 0rpx 20rpx #bebebe;
			padding: 20rpx;
			.top{
				display: flex;
				justify-content: space-between;
			}
			.footer{
				text-align: right;
				margin-top: 20rpx;
				.zhifu{
					display: flex;
					justify-content: space-between;
					margin-top: 10rpx;
				}
			}
			.goodsinfo{
				display: flex;
				flex-direction: row;
				width: 100%;
				justify-content: space-between;
				align-items: flex-end;
				margin-top: 20rpx;
				background-color: #f7f7f7;
				padding:10rpx 0;
				.m-img{
					height: 190upx;
					width: 160upx;
					border-radius: 10upx;
					margin-left: 10rpx;
				}
				.m-text{
					flex:1;
					padding: 0 20upx;
					.m-title{
						font-size: 32upx;
						color:#4c4c4c;
					}
					.m-descripe{
						font-size: 24upx;
						color:#999999;
						margin-top: 10upx;
						display: flex;
						justify-content: space-between;
						margin-bottom: 10upx;
					}
					.m-price{
						font-size: 28upx;
						color:#ff582b;
						font-weight: bold;
						margin-top: 5upx;
					}
				}
			}
		}
	}
	.payorder{
		position: fixed;
		bottom: 0;
		font-size: 28rpx;
		height: 100rpx;
		background-color: #fff;
		border-top: 1px solid #d6d6d6;
		box-shadow: 0px 3px 15px #545252;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		.total{
			width: 400rpx
		}
		.pay{
			width: 150rpx
		}
	}
</style>